<template>
    <div class="help-request-card" @click="handleClick">
        <div class="card-header">
            <div class="user-info">
                <van-image :src="helpRequest.user.avatar || '/default-avatar.png'" width="40" height="40" round
                    fit="cover" />
                <div class="user-details">
                    <div class="username">{{ helpRequest.user.username }}</div>
                    <div class="user-meta">
                        <span class="user-level">{{ getUserLevel(helpRequest.user.level || 1) }}</span>
                        <span class="separator">•</span>
                        <span class="post-time">{{ formatTime(helpRequest.created_at) }}</span>
                    </div>
                </div>
            </div>
            <div class="status-badge" :class="getStatusClass(helpRequest.status)">
                {{ getStatusText(helpRequest.status) }}
            </div>
        </div>

        <div class="card-content">
            <h3 class="request-title">{{ helpRequest.title }}</h3>
            <p class="request-description">{{ helpRequest.description }}</p>

            <!-- 问题分类 -->
            <div class="request-category" v-if="helpRequest.category">
                <van-icon name="label-o" />
                <span>{{ helpRequest.category }}</span>
            </div>

            <!-- 标签 -->
            <div class="request-tags" v-if="helpRequest.tags && helpRequest.tags.length > 0">
                <van-tag v-for="tag in helpRequest.tags.slice(0, 3)" :key="tag" type="warning" plain>
                    {{ tag }}
                </van-tag>
                <span v-if="helpRequest.tags.length > 3" class="more-tags">
                    +{{ helpRequest.tags.length - 3 }}
                </span>
            </div>

            <!-- 悬赏信息 -->
            <div class="reward-info" v-if="helpRequest.reward_points && helpRequest.reward_points > 0">
                <van-icon name="gold-coin-o" />
                <span>{{ helpRequest.reward_points }} points reward</span>
            </div>
        </div>

        <div class="card-footer">
            <div class="engagement-stats">
                <div class="stat-item">
                    <van-icon name="chat-o" />
                    <span>{{ helpRequest.answers_count || 0 }} answers</span>
                </div>
                <div class="stat-item">
                    <van-icon name="eye-o" />
                    <span>{{ helpRequest.views_count || 0 }} views</span>
                </div>
                <div class="stat-item" v-if="helpRequest.best_answer_id">
                    <van-icon name="success" color="#07c160" />
                    <span>Solved</span>
                </div>
            </div>
            <div class="action-buttons">
                <van-button size="mini" type="primary" @click.stop="answerQuestion">
                    Answer
                </van-button>
                <van-button size="mini" @click.stop="toggleBookmark">
                    <van-icon :name="helpRequest.is_bookmarked ? 'star' : 'star-o'" />
                </van-button>
            </div>
        </div>

        <!-- 最佳答案预览 -->
        <div class="best-answer-preview" v-if="helpRequest.best_answer">
            <div class="preview-header">
                <van-icon name="medal-o" color="#ffd21e" />
                <span>Best Answer</span>
            </div>
            <div class="answer-content">
                <div class="answerer-info">
                    <van-image :src="helpRequest.best_answer.user.avatar || '/default-avatar.png'" width="24"
                        height="24" round fit="cover" />
                    <span class="answerer-name">{{ helpRequest.best_answer.user.username }}</span>
                </div>
                <p class="answer-text">{{ helpRequest.best_answer.content }}</p>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { HelpRequest } from '@/api'

interface Props {
    helpRequest: HelpRequest
}

interface Emits {
    (e: 'click', helpRequest: HelpRequest): void
    (e: 'answer', helpRequest: HelpRequest): void
    (e: 'bookmark', helpRequest: HelpRequest): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const getUserLevel = (level: number) => {
    const levels = {
        1: 'Beginner',
        2: 'Intermediate',
        3: 'Advanced',
        4: 'Expert',
        5: 'Master'
    }
    return levels[level as keyof typeof levels] || 'Beginner'
}

const getStatusClass = (status: string) => {
    const classes = {
        'open': 'status-open',
        'answered': 'status-answered',
        'solved': 'status-solved',
        'closed': 'status-closed'
    }
    return classes[status as keyof typeof classes] || 'status-open'
}

const getStatusText = (status: string) => {
    const texts = {
        'open': 'Open',
        'answered': 'Answered',
        'solved': 'Solved',
        'closed': 'Closed'
    }
    return texts[status as keyof typeof texts] || 'Open'
}

const formatTime = (timestamp: string) => {
    const now = new Date()
    const time = new Date(timestamp)
    const diff = now.getTime() - time.getTime()

    const minutes = Math.floor(diff / (1000 * 60))
    const hours = Math.floor(diff / (1000 * 60 * 60))
    const days = Math.floor(diff / (1000 * 60 * 60 * 24))

    if (minutes < 60) {
        return `${minutes}m ago`
    } else if (hours < 24) {
        return `${hours}h ago`
    } else if (days < 7) {
        return `${days}d ago`
    } else {
        return time.toLocaleDateString()
    }
}

const handleClick = () => {
    emit('click', props.helpRequest)
}

const answerQuestion = () => {
    emit('answer', props.helpRequest)
}

const toggleBookmark = () => {
    emit('bookmark', props.helpRequest)
}
</script>

<style lang="scss" scoped>
.help-request-card {
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    border-left: 4px solid #ffd21e;

    &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    }

    &:active {
        transform: translateY(0);
    }

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;

        .user-info {
            display: flex;
            gap: 12px;
            align-items: center;

            .user-details {
                .username {
                    font-size: 16px;
                    font-weight: 600;
                    color: #323233;
                    margin-bottom: 2px;
                }

                .user-meta {
                    display: flex;
                    align-items: center;
                    gap: 6px;
                    font-size: 12px;
                    color: #969799;

                    .user-level {
                        background: #f0f8ff;
                        color: #1989fa;
                        padding: 2px 6px;
                        border-radius: 8px;
                        font-weight: 500;
                    }

                    .separator {
                        color: #c8c9cc;
                    }
                }
            }
        }

        .status-badge {
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;

            &.status-open {
                background: #fff7e6;
                color: #ffd21e;
            }

            &.status-answered {
                background: #e8f4fd;
                color: #1989fa;
            }

            &.status-solved {
                background: #e8f8f0;
                color: #07c160;
            }

            &.status-closed {
                background: #f5f5f5;
                color: #969799;
            }
        }
    }

    .card-content {
        margin-bottom: 16px;

        .request-title {
            font-size: 18px;
            font-weight: 600;
            color: #323233;
            margin: 0 0 8px 0;
            line-height: 1.4;
        }

        .request-description {
            font-size: 15px;
            color: #646566;
            line-height: 1.6;
            margin: 0 0 12px 0;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .request-category {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 8px;
            font-size: 14px;
            color: #646566;

            .van-icon {
                color: #1989fa;
            }
        }

        .request-tags {
            display: flex;
            gap: 6px;
            align-items: center;
            flex-wrap: wrap;
            margin-bottom: 8px;

            .more-tags {
                font-size: 12px;
                color: #969799;
            }
        }

        .reward-info {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 12px;
            background: #fff7e6;
            border-radius: 8px;
            font-size: 14px;
            color: #ffd21e;
            font-weight: 500;

            .van-icon {
                color: #ffd21e;
            }
        }
    }

    .card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 12px;
        border-top: 1px solid #f5f5f5;

        .engagement-stats {
            display: flex;
            gap: 16px;

            .stat-item {
                display: flex;
                align-items: center;
                gap: 4px;
                font-size: 12px;
                color: #646566;

                .van-icon {
                    font-size: 14px;
                    color: #969799;
                }
            }
        }

        .action-buttons {
            display: flex;
            gap: 8px;

            .van-button {
                font-size: 12px;
            }
        }
    }

    .best-answer-preview {
        margin-top: 12px;
        padding: 12px;
        background: #f7f8fa;
        border-radius: 8px;
        border-left: 3px solid #07c160;

        .preview-header {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 8px;
            font-size: 12px;
            font-weight: 500;
            color: #07c160;
        }

        .answer-content {
            .answerer-info {
                display: flex;
                align-items: center;
                gap: 8px;
                margin-bottom: 6px;

                .answerer-name {
                    font-size: 12px;
                    color: #646566;
                    font-weight: 500;
                }
            }

            .answer-text {
                font-size: 13px;
                color: #646566;
                line-height: 1.4;
                margin: 0;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
        }
    }
}
</style>